<template>
    <ul class="ul-flex">
        <li v-for="(item, index) in houseData" :key="index" class="li-wrap" :style="{ background: `linear-gradient(180deg, ${item.beginColor} 0%, ${item.endColor} 100%)` }">
            <h6 class="h6-title">{{ item.title }}</h6>
            <p class="num">{{ item.size }}</p>
            <el-row class="tips">
                <el-col :span="12">{{ item.tipsL }} {{ item.tipsLV }}</el-col>
                <el-col :span="12" style="text-align: right">
                    {{ item.tipsR }} {{ item.tipsRV }}
                    <img v-if="item.iconU" src="/static/icon/house/icon_up.png" alt="" class="up-down-icon" />
                    <img v-if="item.iconD" src="/static/icon/house/icon_down.png" alt="" class="up-down-icon" />
                </el-col>
            </el-row>
            <div class="float-right">
                <img :src="item.iconUrl" alt="" class="icon-logo" />
            </div>
        </li>
    </ul>
</template>

<script>
import { getBasicInfos1 } from '@/api/DashBoardApi';

export default {
    props: {
        bgmData: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            houseData: [
                {
                    beginColor: '#f2f9fe',
                    endColor: '#e6f4fe',
                    title: '营业收入(权责)',
                    size: '0',
                    tipsL: '目标',
                    tipsLV: '0',
                    tipsR: '完成率',
                    tipsRV: '0%',
                    iconUrl: '/static/icon/house/icon_01.png'
                },
                {
                    beginColor: '#f5fef2',
                    endColor: '#e6feee',
                    title: '间天出租率',
                    size: '0%',
                    tipsL: '目标',
                    tipsLV: '0%',
                    tipsR: '完成率',
                    tipsRV: '0%',
                    iconUrl: '/static/icon/house/icon_02.png'
                },
                {
                    beginColor: '#f2f9fe',
                    endColor: '#e6f4fe',
                    title: '成交均价',
                    size: '0',
                    tipsL: '目标',
                    tipsLV: '0',
                    tipsR: '完成率',
                    tipsRV: '0%',
                    iconUrl: '/static/icon/house/icon_03.png'
                },
                {
                    beginColor: '#f6f7ff',
                    endColor: '#ececff',
                    title: '满意度',
                    size: '0%',
                    tipsL: '同比',
                    tipsLV: '0%',
                    tipsR: '完成率',
                    tipsRV: '0%',
                    iconUrl: '/static/icon/house/icon_04.png'
                },
                {
                    beginColor: '#fffef6',
                    endColor: '#fff8ec',
                    title: '投诉',
                    size: '0',
                    tipsL: '同比',
                    tipsLV: '0%',
                    tipsR: '',
                    tipsRV: '0%',
                    iconU: 'true',
                    iconD: '',
                    iconUrl: '/static/icon/house/icon_05.png'
                },
                {
                    beginColor: '#f5fef2',
                    endColor: '#e6feee',
                    title: '保修',
                    size: '0%',
                    tipsL: '同比',
                    tipsLV: '0%',
                    tipsR: '',
                    tipsRV: '0%',
                    iconU: '',
                    iconD: 'true',
                    iconUrl: '/static/icon/house/icon_06.png'
                }
            ]
        };
    },
    mounted() {
        this.loadData({});
    },
    methods: {
        loadData(parms) {
            this.loading = true;
            getBasicInfos1(parms)
                .then((res) => {
                    if (res && res.obj) {
                        this.houseData[0].size = res.obj.incDebt;
                        this.houseData[1].size = res.obj.itrdayRtlRate;
                        this.houseData[2].size = res.obj.avgRentPrice;
                        this.houseData[4].size = res.obj.complaint;
                        this.houseData[5].size = res.obj.maintenance;
                    }
                })
                .catch((error) => {
                    console.error(error);
                });
            setTimeout(() => {
                this.loading = false;
            }, 1200);
        }
    }
};
</script>

<style lang="scss" scoped>
.ul-flex {
    display: flex;
    flex-flow: row wrap;
    .li-wrap {
        position: relative;
        display: flex;
        flex-flow: column nowrap;
        width: 260px;
        height: 134px;
        border-radius: 20px;
        padding: 16px 20px;
        margin: 12px 20px 0 0;
        .h6-title {
            font-size: 14px;
            font-weight: 500;
            color: #1d252f;
        }
        .num {
            font-size: 20px;
            font-weight: bold;
            color: #1d2129;
            margin-top: 30px;
        }
        .tips {
            width: 100%;
            font-size: 12px;
            color: #4e5969;
            margin-top: 8px;
            .up-down-icon {
                width: 12px;
                height: 12px;
            }
        }
        .float-right {
            position: absolute;
            top: 12px;
            right: 12px;
            .icon-logo {
                width: 60px;
                height: 60px;
            }
        }
    }
}
</style>
